<template>
  <div class="parsel">
    <div class="container">
      <h1>Welcome</h1>
      <div class="form">
        <input type="text" placeholder="用户名" v-model="uname" />
        <input type="password" placeholder="密码" v-model="password" />
        <button class="btn-login" @click="logina">登录</button>
      </div>
      <ul class="bg-squares"></ul>
    </div>
  </div>
</template>


<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useCounterStore } from "@/stores/counter.js";
import axios from "axios";
import { post } from "@/util/request.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const store = useCounterStore();

let uname = ref("");
let password = ref("");

const logina = async () => {
  let h1 = document.querySelector("h1");
  let form = document.querySelector(".form");

  const {
    data: { code, msg, data },
  } = await post("/login", { uname: uname.value, pwd: password.value });
  console.log(code), 123;
  if (code == 200) {
    form.style.opacity = 0;
    h1.style.transform = "translateY(75px)";
    store.info = data;
    console.log(store.info,'login');
    
    ElMessage.success(msg);
    setTimeout(() => {
      router.push("/home");
    }, 1500);
  } else {
    ElMessage.error(msg);
  }
};
</script>

<style scoped>
.parsel {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to top left, #ffe29f, #ffa99f, #ffc971);
  overflow: hidden;
}
.container {
  text-align: center;
  color: #fff;
}
.container h1 {
  font-size: 40px;
  font-weight: 100;
  letter-spacing: 2px;
  margin-bottom: 15px;
  transition: 1s ease-in-out;
}
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.5s;
}
.form input {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 3px;
  margin: 0 auto 10px auto;
  width: 250px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  transition: 0.25s;
}
.form input::placeholder {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
}
.form input:hover {
  background: rgba(255, 255, 255, 0.4);
}
.form input:focus {
  background-color: #fff;
  width: 300px;
  color: #ff719a;
}
.btn-login {
  outline: none;
  background: #fff;
  color: #ff719a;
  border: none;
  width: 250px;
  padding: 10px 15px;
  border-radius: 3px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.25s;
}
.btn-login:hover {
  background-color: #f5f7f9;
}
</style>


